<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>公交生活到达圈</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style type="text/css">
        html,
        body,
        #container {
            height: 100%;
        }

        .btn {
            margin-left: 0.5rem;
            width: 4rem;
        }
    </style>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/jquery.range.css" />
</head>

<body>
    <div id="container"></div>
    <div class="input-card" style='width:30rem;'>
        <h4 style='color:black'>Mapbox公交生活到达圈查询-三峡学院</h4>
        <div class="input-item">
            <div class="input-item-prepend"><span class="input-item-text">出发位置</span></div>
            <!-- <input id='lnglat' type="text" value='108.450209, 30.755326'>  重庆三峡学院的地理位置，效果不好，选择下面的五桥南站 -->
            <input id='lnglat' type="text" value='108.445984, 30.763422'>

        </div>
        <div class="input-item" style='margin-bottom:2rem;'>
            <label>时长(分钟)</label>
            <input type="hidden" id="t" class="single-slider" value="60" />
        </div>
        <div class="input-item">
            <div class="input-item-prepend">
                <label class="input-item-text">出行方式</label>
            </div>
            <select iname="v" id="v">
                <option selected value="SUBWAY,BUS">地铁+公交(高德)</option>
                <option value="SUBWAY">地铁(高德)</option>
                <option value="BUS">公交(高德)</option>
                <option value="walking">步行(Mapbox)</option>
                <option value="cycling">骑行(Mapbox)</option>
                <option value="driving">驾车(Mapbox)</option>
            </select>
            <input id="search" type="button" class="btn" value="查询" />
            <input id="clear" type="button" class="btn" value="清除" />
        </div>
        <div class="input-item">
            <label class="input-item-text" style='width:6rem;'>导出坐标系</label>
            <select name="coord" id="coord">
                <option value="WGS84">WGS84</option>
                <option value="GCJ02">GCJ02</option>
            </select>
            <input type="button" class="btn" value="导出geojson" onClick="javascript:outputjson()" style='width:8rem;' />
            <input type="button" class="btn" value="MapShaper" onClick="javascript:outputshp()" style='width:6rem;' />
        </div>
    </div>
    <script
        src="https://webapi.amap.com/maps?v=1.4.15&key=f35aa69595d3fd9527dfe9033a640b9c&plugin=AMap.ArrivalRange"></script>
    <script src="https://cache.amap.com/lbs/static/jquery-1.9.1.js"></script>
    <script src="https://cache.amap.com/lbs/static/jquery.range.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script>
        var accessToken = 'pk.eyJ1IjoibmkxbzEiLCJhIjoiY2t3ZDgzMmR5NDF4czJ1cm84Z3NqOGt3OSJ9.yOYP6pxDzXzhbHfyk3uORg';

        var map = new AMap.Map("container", {
            resizeEnable: true,
            zoomEnable: true,
            center: [116.397428, 39.90923],
            zoom: 10,
            mapStyle: 'amap://styles/c96d75ff867ce8d95400aa40227ed278',
        });

        function getLnglat(e) {
            var lnglat = e.lnglat;
            document.getElementById('lnglat')
                .value = e.lnglat.toString()
            getArriveRange();
        }
        map.on('click', getLnglat);

        var centerMarker;

        function addCenterMarker(position) {
            if (!centerMarker) {
                centerMarker = new AMap.Marker({
                    map: map,
                    position: position
                });
            } else {
                centerMarker.setPosition(position)
            }
        }

        var arrivalRange, polygons = [];
        //添加多边形覆盖物
        function getArriveRange() {
            if (!arrivalRange) {
                arrivalRange = new AMap.ArrivalRange()
            }
            var lnglat = $("#lnglat")
                .val()
                .split(',');
            var t = $("#t")
                .val();
            var v = $("#v")
                .val();

            addCenterMarker(lnglat);
            if ((v == 'SUBWAY,BUS') | (v == 'SUBWAY') | (v == 'BUS')) {
                arrivalRange.search(lnglat, t, function (status, result) {
                    map.remove(polygons);
                    polygons = [];
                    if (result.bounds) {
                        for (var i = 0; i < result.bounds.length; i++) {
                            var polygon = new AMap.Polygon({
                                fillColor: "#336699",
                                fillOpacity: "0.4",
                                strokeColor: "#336699",
                                strokeOpacity: "1",
                                strokeWeight: 2
                            });
                            polygon.setPath(result.bounds[i]);
                            polygons.push(polygon);
                        }
                        map.add(polygons);
                        map.setFitView();
                        map.bounds = result.bounds;
                    }
                }, {
                    policy: v
                });
            } else {
                //Mapbox的查询条件
                var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
                x = lnglat[0];
                y = lnglat[1];
                lnglat_wgs84 = gcj02towgs84(parseFloat(x), parseFloat(y));
                var query =
                    urlBase +
                    v +
                    '/' +
                    lnglat_wgs84[0].toString() +
                    ',' +
                    lnglat_wgs84[1].toString() +
                    '?contours_minutes=' +
                    t +
                    '&polygons=true&access_token=' +
                    accessToken;
                $.ajax({
                    method: 'GET',
                    url: query
                })
                    .done(function (data) {
                        map.remove(polygons);
                        polygons = [];
                        if (data['features']) {
                            for (var i = 0; i < data['features'].length; i++) {
                                var polygon = new AMap.Polygon({
                                    fillColor: "#336699",
                                    fillOpacity: "0.4",
                                    strokeColor: "#336699",
                                    strokeOpacity: "1",
                                    strokeWeight: 2
                                });
                                polygonpath = []

                                for (var j = 0; j < data['features'][i]['geometry']['coordinates'][0].length; j++) {
                                    polygonpath.push(wgs84togcj02(data['features'][i]['geometry']['coordinates'][0][j][0], data['features'][i]['geometry']['coordinates'][0][j][1]))
                                }
                                polygon.setPath(polygonpath);
                                polygons.push(polygon);
                            }
                            map.add(polygons);
                            map.setFitView();
                        }

                    });
            }
        }


        var isChanged = false;
        $(function () {
            $('.single-slider')
                .jRange({
                    onstatechange: getArriveRange,
                    from: 1,
                    to: 60,
                    step: 1,
                    scale: [1, 15, 30, 45, 60],
                    format: '%s',
                    width: 400,
                    showLabels: true,
                    showScale: true
                });
        });
        getArriveRange();

        $('#search')
            .on('click', getArriveRange);
        $('#v')
            .on('change', getArriveRange);
        $('#clear')
            .on('click', function () {
                map.remove(polygons)
            });


        //导出模块
        function wgs84togcj02(lng, lat) {
            pi = 3.1415926535897932384626
            ee = 0.00669342162296594323
            a = 6378245.0
            x_pi = 3.14159265358979324 * 3000.0 / 180.0
            dlat = transformlat(lng - 105.0, lat - 35.0)
            dlng = transformlng(lng - 105.0, lat - 35.0)
            radlat = lat / 180.0 * pi
            magic = Math.sin(radlat)
            magic = 1 - ee * magic * magic
            sqrtmagic = Math.sqrt(magic)
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi)
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * pi)
            mglat = lat + dlat
            mglng = lng + dlng
            return [mglng, mglat]
        }

        function gcj02towgs84(lng, lat) {
            pi = 3.1415926535897932384626
            ee = 0.00669342162296594323
            a = 6378245.0
            x_pi = 3.14159265358979324 * 3000.0 / 180.0
            dlat = transformlat(lng - 105.0, lat - 35.0)
            dlng = transformlng(lng - 105.0, lat - 35.0)
            radlat = lat / 180.0 * pi
            magic = Math.sin(radlat)
            magic = 1 - ee * magic * magic
            sqrtmagic = Math.sqrt(magic)
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * pi)
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * pi)
            mglat = lat + dlat
            mglng = lng + dlng
            return [lng * 2 - mglng, lat * 2 - mglat]
        }

        function transformlat(lng, lat) {
            ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * pi) + 20.0 *
                Math.sin(2.0 * lng * pi)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lat * pi) + 40.0 *
                Math.sin(lat / 3.0 * pi)) * 2.0 / 3.0
            ret += (160.0 * Math.sin(lat / 12.0 * pi) + 320 *
                Math.sin(lat * pi / 30.0)) * 2.0 / 3.0
            return ret
        }

        function transformlng(lng, lat) {
            ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng))
            ret += (20.0 * Math.sin(6.0 * lng * pi) + 20.0 *
                Math.sin(2.0 * lng * pi)) * 2.0 / 3.0
            ret += (20.0 * Math.sin(lng * pi) + 40.0 *
                Math.sin(lng / 3.0 * pi)) * 2.0 / 3.0
            ret += (150.0 * Math.sin(lng / 12.0 * pi) + 300.0 *
                Math.sin(lng / 30.0 * pi)) * 2.0 / 3.0
            return ret
        }


        function getgeojson() {

            var lnglat = $("#lnglat")
                .val()
                .split(',');
            x = lnglat[0];
            y = lnglat[1];
            t = $("#t")
                .val();
            v = $("#v")
                .val();
            coord = $("#coord")
                .val();
            if ((v == 'SUBWAY,BUS') | (v == 'SUBWAY') | (v == 'BUS')) {
                geojson = {},
                    polygonArray = []
                for (var i = 0; i < map.bounds.length; i++) {
                    polygonArray1 = []
                    for (var j = 0; j < map.bounds[i][0].length; j++) {
                        if (coord == 'GCJ02') {
                            polygonArray1.push([map.bounds[i][0][j].lng, map.bounds[i][0][j].lat])
                        }
                        if (coord == 'WGS84') {
                            polygonArray1.push(gcj02towgs84(map.bounds[i][0][j].lng, map.bounds[i][0][j].lat))
                        }
                    }
                    polygonArray.push([polygonArray1])
                }

                geojson.type = 'FeatureCollection'
                geometry = {
                    type: 'MultiPolygon',
                    coordinates: polygonArray
                }

                var shape = {}
                shape.type = 'Feature'
                shape.geometry = geometry
                shape.properties = {
                    x: x,
                    y: y,
                    t: t,
                    v: v
                }
                var features = [shape]
                geojson.features = features
                return geojson
            } else { //Mapbox的查询条件
                var urlBase = 'https://api.mapbox.com/isochrone/v1/mapbox/';
                x = lnglat[0];
                y = lnglat[1];
                lnglat_wgs84 = gcj02towgs84(parseFloat(x), parseFloat(y));
                var query =
                    urlBase +
                    v +
                    '/' +
                    lnglat_wgs84[0].toString() +
                    ',' +
                    lnglat_wgs84[1].toString() +
                    '?contours_minutes=' +
                    t +
                    '&polygons=true&access_token=' +
                    accessToken;
                var geojson = []
                $.ajax({
                    method: 'GET',
                    url: query,
                    async: false,
                    success: function (data) {
                        if (coord == 'WGS84') {
                            geojson = data
                        }
                    }
                })
                return geojson
            }
        }

        function outputjson() {
            var geojson = getgeojson();
            var content = JSON.stringify(geojson);

            var blob = new Blob([content], {
                type: "text/plain;charset=utf-8"
            });
            saveAs(blob, "save.json")
        }

        function outputshp() {
            window.open("http://blog.giscafer.com/mapshaper-plus/",)
        };
    </script>
</body>

</html>